<template>
  <el-container class="home-container">
    <div class="home-box">
      <el-header>
        <div class="user-info-box">
          <div class="inline-block">
            <el-avatar shape="square" :size="50" :src="iconUrl" class="icon-box" fit="cover"></el-avatar>
          </div>
          <div class="inline-block">
            {{userInfo.username}}
          </div>
        </div>
      </el-header>
      <el-main>
        <div class="no-header-box">
          <el-menu router style="border-right: none; text-align: center; width: 100px">
            <el-menu-item index="/user/info">个人信息</el-menu-item>
            <el-menu-item index="/user/favor">我的收藏</el-menu-item>
            <el-menu-item index="/user/remark">我的评论</el-menu-item>
            <el-menu-item index="/user/picture">更改头像</el-menu-item>
            <el-menu-item index="/user/password">修改密码</el-menu-item>
          </el-menu>
        </div>
        <div class="no-header-box">
          <el-card>
            <router-view></router-view>
          </el-card>
        </div>
      </el-main>
    </div>
  </el-container>
</template>

<script>
export default {
  name: 'UserHome',
  data () {
    return {
      userInfo: {
        username: window.sessionStorage.getItem('uname')
      },
      iconUrl: this.$axios.defaults.baseURL + 'static/image/' + window.sessionStorage.getItem('icon') + '.jpg'
    }
  }
}
</script>

<style scoped>
.home-box {
  width: 1200px;
  left: 50%;
  position: absolute;
  transform: translate(-600px);
  height: 100%;
}
.el-header {
  height: 200px!important;
  padding: 0!important;
}
.el-main {
  padding: 0!important;
}
.user-info-box {
  background-image: url(../../assets/image/background/h-bg.png);
  background-repeat:no-repeat;
  background-size: cover;
}
.icon-box {
  width: 100px !important;
  height: 100px !important;
  margin-left: 30px!important;
  margin-top: 70px!important;
}
.inline-block {
  display: inline-block;
}
.inline-block:nth-child(2) {
  font-size: 45px;
  color: #fff;
  margin-left: 20px;
}
.no-header-box {
  display: inline-block;
}
.no-header-box:nth-child(1) {
  float: left;
}
.no-header-box:nth-child(2) {
  width: 1100px;
  height: 1100px;
}
</style>
